<!--
 要情 指令下发
 @Author: zhanbh
 @Date: 2021-04-15
-->
<template>
  <module-tabs class="yq-order" v-model="activeName" :tabs="tabs" is-flex-box>
    <template #first>
      <edit-form ref="form" label-width="calc(5em + 18px)" :model="form" :fields="fields" :rules="rules">
        <template #item-fileHolderList>
          <dg-upload v-model="form.fileHolderList" :server-url="'./'" size="30m" tip-msg="上传文件限制大小为 30M">
            <el-button type="primary" plain>上传文件</el-button>
            <template slot="fileList" slot-scope="{ type, name, size }">
              <i :class="`dg-icon-${type}`"></i>
              {{ `${name} (${size / 1024})KB` }}
            </template>
          </dg-upload>
        </template>
      </edit-form>
    </template>
    <template #second>
      <all-info />
    </template>
    <template #thirds>
      <work-flow />
    </template>
    <template #header-btns v-if="activeName === 'first'">
      <dg-button type="primary" size="mini" :loading="loading" @click="onSubmit">提交</dg-button>
      <dg-button size="mini" @click="()=>$router.go(-1)">关闭</dg-button>
    </template>
  </module-tabs>
</template>

<script>
import ModuleTabs from '@/components/layout/module-tabs';
import EditForm from '@@/edit-form';
import AllInfo from '@/pages/ExterCommun/detail/components/AllInfo';
import WorkFlow from '@/pages/ExterCommun/detail/components/WorkFlow';
import { fetchFeedbackList,orderFeedback } from '@/api/common';
export default {
  name: 'AllBureausOrder',
  components: {
    ModuleTabs,
    EditForm,
    AllInfo,
    WorkFlow
  },
  props: {
    zllx: {
      type: String
    },
    jsdwdmList: {
      type: Array,
      deault: () => []
    },
  },
  data() {
    return {
      loading: false,
      tabs: [
        {
          label: '研判',
          name: 'first'
        },
        {
          label: '基本信息',
          name: 'second'
        },
        {
          label: '工作流程图',
          name: 'thirds'
        }
        // {
        //     label: "流程图",
        //     name: "fourth"
        // }
      ],
      activeName: 'first',

      rules: {
        jqdx: [{ required: true, message: '请填写近期动向', trigger: 'blur' }],
        ypyj: [{ required: true, message: '请填写研判意见', trigger: 'blur' }]
      },

      form: {
        jqdx: '',
        ypyj: '',
        dcyj: '',
        fkbz: '',
        fileHolderList: []
      },
      fields: [
        {
          prop: 'jqdx',
          label: '近期动向',
          tag: 'el-input',
          tagBind: {
            type: 'textarea',
            rows: 3,
            placeholder: '请输入内容',
            maxLength: 200
          }
        },

        {
          prop: 'ypyj',
          label: '研判意见',
          tag: 'el-input',
          tagBind: {
            type: 'textarea',
            rows: 3,
            placeholder: '请输入内容',
            maxLength: 200
          }
        },

        {
          prop: 'dcyj',
          label: '对策意见',
          tag: 'el-input',
          tagBind: {
            type: 'textarea',
            rows: 3,
            placeholder: '请输入内容',
            showwordlimit: true,
            maxLength: 200
          }
        },
        {
          prop: 'fkbz',
          label: '备注',
          tag: 'el-input',
          tagBind: {
            type: 'textarea',
            rows: 3,
            placeholder: '请输入内容',
            maxLength: 200,
            showWordLimit: true
          }
        },

        {
          prop: 'fileHolderList',
          label: '附件'
        }
      ]
    };
  },

  mounted() {
    this.flowId = this.$route.params.id;
    // 初始化表单内容
    this.initForm();
  },
  methods: {
    /**
     * @desc 初始化研判表单内容
     */
    initForm(){
      if(this.flowId){
        fetchFeedbackList({
        page: 0,
        size: 1,
        sort: JSON.stringify({ fksj: 'desc' }),
        searchCondition: JSON.stringify([
          { name: 'query_fj', value: 'true', op: '=' },
          { name: 'query_qx', value: 'ALL', op: '=' },
          { name: 'query_zlxx', value: 'true', op: '=' },
          { name: 'query_zljsxx', value: 'true', op: '=' },
          { name: 'flowid', value: this.flowId, op: '=' },
          { name: 'fklx', value: '2', op: '=' }
        ])
      }).then(res => {
        if (Array.isArray(res.data.content) && res.data.content.length) {
          this.form = res.data.content[0];
        }
      });
      }
    },
    onSubmit() {
      this.$refs.form.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          orderFeedback({
            flowid: this.flowId,
            fklx: 2,
            ...this.form
          })
            .then(() => {
              this.loading = false;
              this.$message.success('研判成功');
              this.$router.go(-1);
            })
            .catch(() => {
              this.loading = false;
              this.$message.warning('研判失败');
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.yq-order {
  height: calc(100vh - 11rem);
}
.edit-form {
  max-width: 1000px;
}
</style>
